<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="用户昵称" prop="nickName">
      <el-input v-model="user.nickName"/>
    </el-form-item>
    <el-form-item label="手机号码" prop="phonenumber">
      <el-input v-model="user.phonenumber" maxlength="11"/>
    </el-form-item>
    <el-form-item label="验证码" prop="code">
      <el-input placeholder="请输入验证码" v-model="user.code"></el-input>
      <el-button @click.prevent="getVerifyCode" class="code-btn" :disabled="!show">
        <span v-show="show">获取验证码</span>
        <span v-show="!show" class="count">{{ count }} s</span>
      </el-button>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="user.email" maxlength="50"/>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="user.sex">
        <el-radio label="0">男</el-radio>
        <el-radio label="1">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {sendSmsVerifyCode, updateUserProfile} from "@/api/system/user";
import {verifySmsVerifyCode} from "@/api/zjgl/budgetFundsOut";

export default {
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      count: 60,
      show: true,
      // 表单校验
      rules: {
        nickName: [
          {required: true, message: "用户昵称不能为空", trigger: "blur"}
        ],
        code: [
          {required: true, message: "验证码不能为空", trigger: "blur"}
        ],
        email: [
          {required: true, message: "邮箱地址不能为空", trigger: "blur"},
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phonenumber: [
          {required: true, message: "手机号码不能为空", trigger: "blur"},
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    getVerifyCode() {       //axios请求
      if (this.user.phonenumber == "" || this.user.phonenumber == undefined || this.user.phonenumber == null) {
        this.$message.warning("手机号码不可为空");
        return;
      }
      let mobile_mode = /^1[345789]\d{9}$/;
      if (!mobile_mode.test(this.user.phonenumber)) {
        this.$message.warning("手机号码格式不正确");
        return;
      }
      sendSmsVerifyCode({phoneNumber: this.user.phonenumber}).then((res) => {
        // 验证码倒计时
        if (!this.timer) {
          this.count = 60;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= 60) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      });
    },
    submit() {
      let _this=this;
      this.$refs["form"].validate(valid => {
        if (valid) {
          verifySmsVerifyCode({verifyCode: this.user.code}).then(response => {
            if (response.code == 200 && response.msg == "验证成功")
            {
              const loading = _this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
              updateUserProfile(this.user).then(response => {
                loading.close();
                _this.msgSuccess("修改成功");
              });
            }
            else {
              _this.msgInfo(response.msg);
            }
          });
        }
      });
    },
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({path: "/index"});
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
/* 短信验证码css */
.pr {
  position: relative;
}

.code-btn {
  width: 100px;
  height: 20px;
  position: absolute;
  top: 10px;
  right: 5px;
  z-index: 222;
  color: #ef8466;
  font-size: 14px;
  border: none;
  border-left: 1px solid #bababa;
  padding-left: 16px;
  padding-top: 4px;
  background-color: #fff;
  cursor: pointer;
  border-radius: 0;
}

.code-btn:hover {
  color: #ef8466;
  background-color: #fff;
  border-left: 1px solid #bababa;
}

</style>
